import React, {useEffect, useState} from 'react';
import ProForm, { ProFormText,ProFormSwitch} from "@ant-design/pro-form";
import {message, Modal, Skeleton,Switch,Form} from "antd";
import {addUserData, getUser, updateUser} from "@/services/user";
import AliyunOssUpdate from "@/components/AliyunOssUpdate";

const CreateOrEdit = (props) => {
  // 从父组件传入的props
  const {isModalVisible, uid, isShowModal, actionRef} = props;

  // 设置传入的type类型 -添加、编辑
  const type = uid !== undefined ? "编辑" : "添加"

  // oss上传设置字段
  const [formObj] = ProForm.useForm()
  const setIconKey = fileKey => formObj.setFieldsValue({'portrait': fileKey})

  // 初始化数据列表 定义设置状态
  const [initialValues, setInitialValues] = useState(undefined);

  // 更新 打开显示模态框 获取用户数据
  useEffect(async () => {
    if (uid !== undefined) {
      const userDetailData = await getUser(uid)
      userDetailData.data.autograph = userDetailData.data.info.data.autograph
      userDetailData.data.company = userDetailData.data.info.data.company
      setInitialValues(userDetailData.data)
    }
  }, [])

  // 执行添加
  const handleSubmit = async (data) => {
    let response = {}
    if (uid === undefined) { // 添加
      data.status = data.status ? 1 : 0
      response = await addUserData(data);
    } else { // 編輯
      response = await updateUser(data)
    }

    if (response.status === undefined) {
      actionRef.current.reload()
      message.success(type + '用户成功')
      isShowModal(false)
    }
  }

  return (
    <Modal
      title={type + "用户"}
      visible={isModalVisible}
      onCancel={() => isShowModal(false)}
      footer={false}
      destroyOnClose={true}
    >
      {
        initialValues === undefined && uid !== undefined ? <Skeleton active /> :
          <ProForm
            form={formObj}
            onFinish={(a) => handleSubmit(a)}
            initialValues={initialValues}
            submitter={{
              searchConfig: {
                submitText: '提交',
              },
              submitButtonProps: {
                size: 'middle',
                style: {
                  width: '100%',
                },
              },
            }}
          >
            <ProFormText
              name="id"
              hidden={true}
            />
            <ProFormText
              name="username"
              label="用户名"
              placeholder="请输入用户名"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText
              name="nickname"
              label="昵称"
              placeholder="请输入昵称"
              rules={[
                {
                  required: true,
                  message: '请输入昵称!',
                },
              ]}
            />
            {
              uid === undefined ? <ProFormText.Password
                name="password"
                label="密码"
                placeholder="请输入密码"
                rules={[
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                  {
                    min: 6,
                    message: '密码 最低6位',
                  },
                  {
                    max: 12,
                    message: '密码 最多12位',
                  }
                ]}
              /> : ''
            }
            <ProFormText
              name="phone"
              label="手机号"
              placeholder="请输入手机号"
              rules={[
                {
                  required: true,
                  message: '请输入手机号!',
                },
                {
                  pattern: /^1\d{10}$/,
                  message: '不合法的手机号格式!',
                },
              ]}
            />
            {
              uid !== undefined ? <ProForm.Item
                name="portrait"
                label="头像"
                rules={[
                  {
                    required: true,
                    message: '请上传头像',
                  },
                ]}
              >
                <div>
                  <AliyunOssUpdate
                    accept="image/*"
                    setIconKey={setIconKey}
                  >
                    {initialValues.portrait ?
                      <img src={initialValues.portrait} alt="avatar" style={{width: '20%'}}/> : ''}
                  </AliyunOssUpdate>
                </div>
              </ProForm.Item> : ''
            }
            {
              uid !== undefined ? <ProFormText
                name="email"
                label="邮箱"
                placeholder="请输入邮箱地址"
                rules={[
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址'
                  }
                ]}
              /> : ''
            }
            {
              uid !== undefined ? <ProFormText
                name="autograph"
                label="个人简介"
                placeholder="请输入个人简介"
                rules={[
                  {
                    min: 6,
                    message: '个人简介 最少6位',
                  },
                  {
                    max: 50,
                    message: '个人简介 最多50位',
                  }
                ]}
              /> : ''
            }
            {
              uid !== undefined ? <ProFormText
                name="company"
                label="公司名称"
                placeholder="请输入公司名称"
                rules={[
                  {
                    min: 6,
                    message: '公司名称 最低6位',
                  },
                  {
                    max: 20,
                    message: '公司名称 最低20位',
                  }
                ]}
              /> : ''
            }
            {
              uid !== undefined ?
                <Form.Item name="status" label="状态">
                  <Switch checked={initialValues.status == 1 ? true : false} />
                </Form.Item>
                : ''
            }
            {
              uid === undefined ?
                <Form.Item name="status" label="状态">
                  <Switch defaultChecked/>
                </Form.Item>
                 : ''
            }
          </ProForm>
      }
    </Modal>
  );
}
;

export default CreateOrEdit;
